<div class="page-content login-page">
  <!-- 状态栏 -->
  <div class="status-bar">
    <div class="time">09:41</div>
    <div class="battery-wifi">
      <i data-feather="wifi" style="width: 16px; height: 16px;"></i>
      <i data-feather="battery" style="width: 16px; height: 16px;"></i>
    </div>
  </div>

  <!-- 页面头部 -->
  <header class="page-header">
    <h1>欢迎登录</h1>
    <p>请输入您的账户信息</p>
  </header>

  <!-- 页面主体 -->
  <div class="page-body">
    <!-- Logo区域 -->
    <div class="u-text-center u-mb-xl">
      <div class="c-avatar c-avatar--lg" style="margin: 0 auto; background: linear-gradient(135deg, #007AFF, #5AC8FA);">
        <i data-feather="user" style="width: 28px; height: 28px; color: white;"></i>
      </div>
    </div>

    <!-- 登录表单 -->
    <form id="login-form" class="login-form">
      <div class="c-input-group">
        <label for="email" class="c-label">邮箱地址</label>
        <input 
          type="email" 
          id="email" 
          class="c-input" 
          placeholder="请输入您的邮箱地址"
          required
        >
      </div>

      <div class="c-input-group">
        <label for="password" class="c-label">密码</label>
        <input 
          type="password" 
          id="password" 
          class="c-input" 
          placeholder="请输入您的密码"
          required
        >
      </div>

      <!-- 记住登录选项 -->
      <div class="login-options u-mb-lg">
        <label class="checkbox-label">
          <input type="checkbox" id="remember" class="checkbox-input">
          <span class="checkbox-custom"></span>
          <span class="checkbox-text">记住登录状态</span>
        </label>
      </div>

      <!-- 登录按钮 -->
      <button type="submit" class="c-button c-button--primary c-button--full u-mb-md">
        登录
      </button>

      <!-- 忘记密码链接 -->
      <div class="u-text-center">
        <button type="button" class="c-button c-button--text forgot-password">
          忘记密码？
        </button>
      </div>
    </form>

    <!-- 分隔符 -->
    <div class="c-divider"></div>

    <!-- 其他登录方式 -->
    <div class="social-login">
      <p class="u-text-center u-mb-lg" style="color: var(--color-gray-600); font-size: var(--font-size-sm);">
        其他登录方式
      </p>
      
      <div class="social-buttons">
        <button class="c-button c-button--secondary social-button">
          <i data-feather="smartphone" style="width: 18px; height: 18px;"></i>
          手机验证码
        </button>
        
        <button class="c-button c-button--secondary social-button">
          <i data-feather="message-circle" style="width: 18px; height: 18px;"></i>
          微信登录
        </button>
      </div>
    </div>

    <!-- 注册链接 -->
    <div class="register-link u-text-center u-mt-xl">
      <span style="color: var(--color-gray-600); font-size: var(--font-size-sm);">
        还没有账户？
      </span>
      <button type="button" class="c-button c-button--text" style="padding: 0; margin-left: 4px;">
        立即注册
      </button>
    </div>
  </div>
</div>

<style>
/* 登录页面特定样式 */
.login-page {
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
}

.login-form {
  max-width: 320px;
  margin: 0 auto;
}

/* 自定义复选框 */
.checkbox-label {
  display: flex;
  align-items: center;
  cursor: pointer;
  font-size: var(--font-size-sm);
  color: var(--color-gray-700);
}

.checkbox-input {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

.checkbox-custom {
  position: relative;
  width: 18px;
  height: 18px;
  border: 2px solid var(--color-gray-300);
  border-radius: 4px;
  margin-right: var(--spacing-sm);
  transition: all 0.2s ease;
}

.checkbox-input:checked + .checkbox-custom {
  background: var(--color-primary);
  border-color: var(--color-primary);
}

.checkbox-input:checked + .checkbox-custom::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
  font-size: 12px;
  font-weight: bold;
}

.checkbox-text {
  flex: 1;
}

/* 社交登录按钮 */
.social-buttons {
  display: flex;
  gap: var(--spacing-md);
}

.social-button {
  flex: 1;
  padding: 12px 16px;
  font-size: var(--font-size-sm);
}

/* 登录选项 */
.login-options {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* 忘记密码按钮 */
.forgot-password {
  font-size: var(--font-size-sm);
  color: var(--color-gray-600);
}

.forgot-password:hover {
  color: var(--color-primary);
}

/* 注册链接 */
.register-link {
  padding-bottom: var(--spacing-lg);
}

/* 响应式调整 */
@media (max-width: 375px) {
  .login-form {
    max-width: 100%;
    padding: 0 var(--spacing-sm);
  }
  
  .social-buttons {
    flex-direction: column;
  }
  
  .social-button {
    width: 100%;
  }
}
</style> 